為何我想了解 webpack？

不知道你是否也會好奇，不論是透過vue-cli或是react-create-app建立的專案 ，只要執行:

npm start / npm run serve

需要轉譯的檔案也能直接被使用、多個模組化的 .js檔 也不需要透過加入<script> 或是 import 之類的方式引入使用呢？

我有一個大膽的想法！都是打包工具（如 webpack） 在背後… 處理。

所以 webpack 會做什麼？

webpack 是一個靜態模組打包工具，它的功用是把前端開發時用到的諸多靜態資源（如 .js, .css, .png等檔案類型）進行打包 (bundle)。

v4.0 以後 webpack.config.js 不再是必備的設定，而是當專案需要客製化打包設定時再加入即可。

了解了上述的基本概念外，你一定要知道的核心名詞：

1. entry
2. output
3. loaders
4. plugins （抱歉我還沒看也不懂，這次不會分享）
5. mode

下面會各別進行介紹：

Entry

引入自官方文件

An entry point indicates which module webpack should use to begin building out its internal dependency graph.

可以理解為入口點(entry point) ，用來指示 webpack 以哪個檔案作為打包(bundle)的位置。你可以透過 entry 這個屬性去自定義打包路徑。其中路徑又可分為：單一打包路徑以及多打包路徑。

//webpack.config.js

//單一路徑的寫法：
module.exports = {
  //1.字串寫法
  entry:"./src/index.js",
  //2.陣列寫法
  entry:["./src/index.js"]
}

//多路徑的寫法
module.exports = {
  //物件寫法
  entry:{
    default:'./src/index.js',
    main:'./src/main.js',
  }
}

注意：當沒有特別設定時，預設會產生 單一打包路徑 ：./src/index.js

Output

決定打包後的檔案放置位置、檔案名稱，它有以下兩個參數：

1. path: 設定檔案放置路徑（官方文件是使用 nodejs 內建的方法）
2. fileName: 輸出的檔案名稱

//webpack.config.js

const path = require('path');
module.exports = {
  entry:{
    default:'./src/index.js',
    main:'./src/main.js',
  },
  output:{
    path: path.resolve(__dirname, "dist")
    fileName:''
  }
}

當沒有特別設定時，預設的輸出路徑為：/dist/main.js

Loader (modules)

要知道 webpack 本身只能編譯 .js跟 .json兩種檔案類型，但實際上一般專案需打包內容遠不止如此，常見要打包的還有像是 .scss , 各種圖檔.png 。就是需要透過載入各種 Loader 來進行處理：

1. test: 檔案處理的條件（常使用：正則）
2. use: 負責處理的套件 ( 例如： sass-loader )

白話來說就是符合 test條件的內容，會啟動 use 載入模組進行處理

//webpack.config.js

module.exports = {
  entry:{
    default:'./src/index.js',
    main:'./src/main.js',
  },
  output:
  {
    path: path.resolve(__dirname, "dist")
    fileName:''
  },
  modules:{
    rules:
   [
    {
      test:/\$/g,
      use:'sass-loader'
    },
   ]
  }
}

Mode

透過設定 mode去告知 webpack 現在要使用哪個內建的環境參數，有 production, development, none

module.exports = {
  entry:{
    default:'./src/index.js',
    main:'./src/main.js',
  },
  output:
  {
    path: path.resolve(__dirname, "dist")
    fileName:''
  },
  modules:{
    rules:
   [
    {
      test:/\$/g,
      use:'sass-loader'
    },
   ]
  },
  mode:'development'
}

mode的預設值為 production

小結

首先，恭喜你完成一個最最基礎的 webpack.config.js 設定了。
雖然你現在應該連自己的小作品也不敢打包，更不用說是專案。

沒關係，下一篇就讓小的我來打包自己的小作品給你看吧？

參考資料:

1. 淺談 Bundle、與Vue-CLI

2. [note] Webpack 學習筆記